<template>
	<view class="">
		<view :class="isMine ? 'flex_1' : ''">
			<view :class="'text-message ' + (isMine ? 'my-text' : '')">
				<view v-for="(item, index) in renderDom" :key="index" class="message-body-span">
					<span class="message-body-span-text" v-if="item.name === 'span'">{{ item.text }}</span>
					<image v-if="item.name === 'img'" class="emoji-icon" :src="item.src"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { parseText } from '../../../base/message-facade';
export default {
	data() {
		return {
			renderDom: []
		};
	},
	props: {
		message: {
			type: Object
		},
		isMine: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		message: {
			handler: function (newVal) {
				this.setData({
					renderDom: parseText(newVal)
				});
			},
			immediate: true,
			deep: true
		}
	},
	methods: {}
};
</script>
<style lang="less">
@import './index.css';
</style>
